<template>
    <div class="qilin-QilinUploadImage">
        <div class="header">基本使用</div>
        <div class="content">1、指定action上传（autoUpload须设置为true）</div>
        <QilinUploadImage v-model:uploadImageConfig="uploadImageConfig"
            @success="(value)=>{
                console.log(value);
            }"
            @actionSuccess="(res,file)=>{
                uploadImageConfig.fileList.push({...res[uploadImageConfig.imageOptions?.responseDataName || 'data'],raw:file.raw});
            }"
        ></QilinUploadImage>
        <CodeMirror :codeValue="codeValue1"></CodeMirror>
        <br>
        <br>
        <div class="content">2、指定action上传（autoUpload须设置为true）&回显已上传图片</div>
        <QilinUploadImage v-model:uploadImageConfig="uploadImageConfig1"
            :fileList='[
                {
                    fileName:"/profile/upload/2024/04/18/20221123-mp-certified-banner_20240418100434A012.png",
                    newFileName:"20221123-mp-certified-banner_20240418100434A012.png",
                    originalFilename:"20221123-mp-certified-banner.png",
                    url:"http://47.122.16.23:8081/profile/upload/2024/04/18/20221123-mp-certified-banner_20240418100434A012.png"
                }
            ]'
            @success="(value)=>{
                console.log(value);
            }"
            @actionSuccess="(res,file)=>{
                uploadImageConfig.fileList.push({...res[uploadImageConfig.imageOptions?.responseDataName || 'data'],raw:file.raw});
            }"
        ></QilinUploadImage>
        <CodeMirror :codeValue="codeValue2"></CodeMirror>
        <br>
        <br>
        <div class="content">3、不指定action上传</div>
        <QilinUploadImage v-model:uploadImageConfig="uploadImageConfig2"
            @success="(value)=>{
                console.log(value);
            }"
        ></QilinUploadImage>
        <CodeMirror :codeValue="codeValue3"></CodeMirror>
        <br>
        <br>
        <div class="content">4、不指定action上传&回显已上传图片</div>
        <QilinUploadImage v-model:uploadImageConfig="uploadImageConfig3"
            :fileList='[
                {
                    fileName:"/profile/upload/2024/04/18/20221123-mp-certified-banner_20240418100434A012.png",
                    newFileName:"20221123-mp-certified-banner_20240418100434A012.png",
                    originalFilename:"20221123-mp-certified-banner.png",
                    url:"http://47.122.16.23:8081/profile/upload/2024/04/18/20221123-mp-certified-banner_20240418100434A012.png"
                }
            ]'
            @success="(value)=>{
                console.log(value);
            }"
        ></QilinUploadImage>
        <CodeMirror :codeValue="codeValue4"></CodeMirror>
        <br>
        <br>
        <div class="content">5、不指定action上传的另一种样式</div>
        <QilinUploadImage v-model:uploadImageConfig="uploadImageConfig4"
            @success="(value)=>{
                console.log(value);
            }"
        ></QilinUploadImage>
        <CodeMirror :codeValue="codeValue5"></CodeMirror>
        <br>
        <br>
        <div class="header">Props</div>
        <QilinTable v-model:tableConfig="propsTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Events</div>
        <QilinTable v-model:tableConfig="eventsTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Exposes</div>
        <br>
        <br>
        <div class="header">Slots</div>
        <!-- <QilinTable v-model:tableConfig="slotsTableConfig"></QilinTable> -->
        <br>
        <br>
    </div>
</template>

<script setup>

/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/
const codeValue1=computed(()=>{
    return `
        // --html部分
        <QilinUploadImage v-model:uploadImageConfig="uploadImageConfig"
            @success="(value)=>{
                console.log(value);
            }"
            @actionSuccess="(res,file)=>{
                uploadImageConfig.fileList.push({...res[uploadImageConfig.imageOptions?.responseDataName || 'data'],raw:file.raw});
            }"
        ></QilinUploadImage>
        // --js部分
        const uploadImageConfig=reactive({
            action:"http://47.122.16.23:8081/common/upload",
            headers:{
                Authorization:"Bearer ***"
            },
            autoUpload:true,
            fileList:[],
            limit:1,
            imageOptions:{
                serverUrl:"url"
            }
        });
    `
});
const codeValue2=computed(()=>{
    return `
        // --html部分
        <QilinUploadImage v-model:uploadImageConfig="uploadImageConfig1"
            :fileList='[
                {
                    fileName:"/profile/upload/2024/04/18/20221123-mp-certified-banner_20240418100434A012.png",
                    newFileName:"20221123-mp-certified-banner_20240418100434A012.png",
                    originalFilename:"20221123-mp-certified-banner.png",
                    url:"http://47.122.16.23:8081/profile/upload/2024/04/18/20221123-mp-certified-banner_20240418100434A012.png"
                }
            ]'
            @success="(value)=>{
                console.log(value);
            }"
            @actionSuccess="(res,file)=>{
                uploadImageConfig.fileList.push({...res[uploadImageConfig.imageOptions?.responseDataName || 'data'],raw:file.raw});
            }"
        ></QilinUploadImage>
        // --js部分
        const uploadImageConfig1=reactive({
            action:"http://47.122.16.23:8081/common/upload",
            headers:{
                Authorization:"Bearer ***"
            },
            autoUpload:true,
            fileList:[],
            limit:1,
            imageOptions:{
                serverUrl:"url"
            }
        });
    `
});
const codeValue3=computed(()=>{
    return `
        // --html部分
        <QilinUploadImage v-model:uploadImageConfig="uploadImageConfig2"
            @success="(value)=>{
                console.log(value);
            }"
        ></QilinUploadImage>
        // --js部分
        const uploadImageConfig2=reactive({
            fileList:[],
            imageIp:"http://47.122.16.23:8081",
            limit:1,
            imageFit:"fill"
        });
    `
});
const codeValue4=computed(()=>{
    return `
        // --html部分
        <QilinUploadImage v-model:uploadImageConfig="uploadImageConfig3"
            :fileList='[
                {
                    fileName:"/profile/upload/2024/04/18/20221123-mp-certified-banner_20240418100434A012.png",
                    newFileName:"20221123-mp-certified-banner_20240418100434A012.png",
                    originalFilename:"20221123-mp-certified-banner.png",
                    url:"http://47.122.16.23:8081/profile/upload/2024/04/18/20221123-mp-certified-banner_20240418100434A012.png"
                }
            ]'
            @success="(value)=>{
                console.log(value);
            }"
        ></QilinUploadImage>
        // --js部分
        const uploadImageConfig3=reactive({
            fileList:[],
            imageIp:"http://47.122.16.23:8081",
            limit:1,
            imageFit:"fill"
        });
    `
});
const codeValue5=computed(()=>{
    return `
        // --html部分
        <QilinUploadImage v-model:uploadImageConfig="uploadImageConfig4"
            @success="(value)=>{
                console.log(value);
            }"
        ></QilinUploadImage>
        // --js部分
        const uploadImageConfig4=reactive({
            fileList:[],
            imageIp:"http://47.122.16.23:8081",
            limit:1,
            showIconImage:true
        });
    `
});


/*
    逻辑脚本代码区域
*/
const uploadImageConfig=reactive({
    action:"http://47.122.16.23:8081/common/upload",
    headers:{
        Authorization:"Bearer ***"
    },
    autoUpload:true,
    fileList:[],
    limit:1,
    imageOptions:{
        serverUrl:"url"
    }
});
const uploadImageConfig1=reactive({
    action:"http://47.122.16.23:8081/common/upload",
    headers:{
        Authorization:"Bearer ***"
    },
    autoUpload:true,
    fileList:[],
    limit:1,
    imageOptions:{
        serverUrl:"url"
    }
});
const uploadImageConfig2=reactive({
    fileList:[],
    imageIp:"http://47.122.16.23:8081",
    limit:1,
    imageFit:"fill"
});
const uploadImageConfig3=reactive({
    fileList:[],
    imageIp:"http://47.122.16.23:8081",
    limit:1,
    imageFit:"fill"
});
const uploadImageConfig4=reactive({
    fileList:[],
    imageIp:"http://47.122.16.23:8081",
    limit:1,
    showIconImage:true
});
const propsTableConfig=reactive({
    elTableConfig:{
        border:true,
        defaultExpandAll:true,
        rowKey:"attrName",
        cellStyle:({row,column,rowIndex,columnIndex})=>{
            // console.log(row,column,rowIndex,columnIndex);
            // if((rowIndex === 17 && columnIndex === 0)
            // ){
            //     return {
            //         "font-weight":"bolder",
            //         color:"#2d8cf0"
            //     }
            // }
        }
    },
    headerConfig:[
        {
            label:"属性名",
            prop:"attrName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"attrType",
            type:"text",
            width:120
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        },
        {
            label:"可取值",
            prop:"valuable",
            type:"text",
            replaceValue:"-"
        },
        {
            label:"默认值",
            prop:"default",
            type:"text",
            width:150
        }
    ],
    tableData:[
        {
            attrName:"action",
            attrType:"string",
            description:"文件上传至服务器的url地址",
            valuable:"-",
            default:"#"
        },
        {
            attrName:"headers",
            attrType:"object",
            description:"设置上传的请求头，当action时有值时，用以设置token等参数",
            valuable:"-",
            default:"-"
        },
        {
            attrName:"listType",
            attrType:"string",
            description:"文件列表类型",
            valuable:"'text' | 'picture' | 'picture-card'",
            default:"picture-card"
        },
        {
            attrName:"autoUpload",
            attrType:"boolean",
            description:"是否自动上传，当指定action上传时autoUpload须设置为true",
            valuable:"true/false",
            default:"false"
        },
        {
            attrName:"limit",
            attrType:"number",
            description:"文件允许上传的数量",
            valuable:"-",
            default:5
        },
        {
            attrName:"fileList",
            attrType:"array",
            description:"默认上传的文件，必填",
            valuable:"-",
            default:"-"
        },
        {
            attrName:"multiple",
            attrType:"boolean",
            description:"是否支持多选文件",
            valuable:"true/false",
            default:"true"
        },
        {
            attrName:"drag",
            attrType:"boolean",
            description:"是否启用拖拽上传",
            valuable:"true/false",
            default:"true"
        },
        {
            attrName:"disabled",
            attrType:"boolean",
            description:"是否禁用上传",
            valuable:"true/false",
            default:"false"
        },
        {
            attrName:"fileTypeText",
            attrType:"string",
            description:"支持格式文字说明",
            valuable:"-",
            default:"（支持png、jpg、jpeg、gif文件格式）"
        },
        {
            attrName:"fileType",
            attrType:"array[string]",
            description:"支持上传的文件类型",
            valuable:"['png','jpg','jpeg','gif']",
            default:"['png','jpg','jpeg','gif']"
        },
        {
            attrName:"fileSize",
            attrType:"number",
            description:"文件上传的内容大小，默认限制在20M以内",
            valuable:"-",
            default:"20 * 1000 * 1000"
        },
        {
            attrName:"fileSizeText",
            attrType:"string",
            description:"文件大小提示标语",
            valuable:"-",
            default:"大小20M以内"
        },
        {
            attrName:"iconfont",
            attrType:"string",
            description:"默认显示的iconfont图标",
            valuable:"-",
            default:"icon-shangchuan-shangchuantupian"
        },
        {
            attrName:"showIconImage",
            attrType:"boolean",
            description:"是否显示另一类形式的图片组件样式",
            valuable:"true/false",
            default:"false"
        },
        {
            attrName:"imageFit",
            attrType:"string",
            description:"图片的适应类型",
            valuable:"'' | 'contain' | 'fill' | 'cover' | 'none' | 'scale-down'",
            default:"contain",
        },
        {
            attrName:"imageIp",
            attrType:"string",
            description:"设置查看图片或文件的服务器ip--预览组件时须借助该属性或imageOptions属性的配置",
            valuable:"-",
            default:"-",
        },
        {
            attrName:"imageOptions",
            attrType:"object",
            description:"查看图片或文件时的设置配置项--仅当type=image/type=file且isImageArrayString为false时生效",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"serverOriginalName",
                    attrType:"string",
                    description:"原始文件名称，用以对应后台返回的字段名称",
                    valuable:"-",
                    default:"originalFileName",
                },
                {
                    attrName:"serverName",
                    attrType:"string",
                    description:"回显文件名称，用以对应后台返回的字段名称",
                    valuable:"-",
                    default:"newFileName",
                },
                {
                    attrName:"serverUrl",
                    attrType:"string",
                    description:"回显文件url，用以对应后台返回的字段名称",
                    valuable:"-",
                    default:"fileName",
                },
                {
                    attrName:"serverWholeUrl",
                    attrType:"string",
                    description:"回显文件完整的url，用以对应后台返回的字段名称",
                    valuable:"-",
                    default:"url",
                },
                {
                    attrName:"responseDataName",
                    attrType:"string",
                    description:"文件上传至服务器，返回的响应字段，默认为data，通常也是data，当指定action上传方式时生效",
                    valuable:"-",
                    default:"data",
                },
            ]
        },
    ],
    paginationsObj:{
        isHide:true
    }
});
const eventsTableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"事件名",
            prop:"eventName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"eventType",
            type:"text",
            width:120
        },
        {
            label:"参数",
            prop:"eventValue",
            type:"text",
            width:120
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        }
    ],
    tableData:[
        {
            eventName:"success",
            eventType:"function",
            eventValue:"value",
            description:"图片上传成功后触发事件"
        },
        {
            eventName:"actionSuccess",
            eventType:"function",
            eventValue:"res,file",
            description:"当指定action上传方式时图片成功上传后的触发事件"
        },
    ],
    paginationsObj:{
        isHide:true
    }
});


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>

</style>
